<template>
  <div id="cartLayout">
    <div class="cart">
      <div>

      </div>
      <div>
        <Table :columns="cartColumn" :data="cartItems"></Table>
      </div>
    </div>
    <Affix :offset-bottom="0">
      <div class="cart-toolbar fixed-bottom">
        <div class="toolbar-wrap">
          <div class="option-box">
            <div class="toolbar-right">
              <div class="comm-right">
                <div class="btn-area">
                  <a class="submit-btn" @click="handleCheckout()"> 去结算</a>
                </div>
                <div class="price-sum">
                  <span class="txt">总价：</span>
                  <span class="price"><em>￥{{sumPrice}}</em></span>
                  <br>
                  <span class="txt">已节省：</span>
                  <span class="price total-re-price">￥0.00</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Affix>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        cartColumn: [
          {
            type: 'selection',
            width: 60,
            align: 'center',
            title: '全选'
          },
          {
            title: '商品',
            key: 'name'
          },
          {
            title: '单价',
            key: 'price'
          },
          {
            title: '数量',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('a', {
                  style: {
                    margin: '0 5px',
                    padding: '5px',
                    fontSize: '16px'
                  },
                  on: {
                    click: () => {
                      if (params.row.quantity > 1) {
                        params.row.quantity -= 1
                        this.sumPrice -= params.row.price
                        this.hanldeUpdateItemQuantity(params.row.id, params.row.quantity)
                      }
                    }
                  }
                }, '-'),
                h('Input', {
                  props: {
                    type: 'text',
                    size: 'small',
                    value: params.row.quantity
                  },
                  style: {
                    width: '42px'
                  }
                }),
                h('a', {
                  props: {
                    type: 'text',
                    size: 'small',
                    class: 'decrement'
                  },
                  style: {
                    margin: '0 0 0 5px',
                    padding: '5px',
                    fontSize: '16px'
                  },
                  on: {
                    click: () => {
                      params.row.quantity += 1
                      this.sumPrice += params.row.price
                      this.hanldeUpdateItemQuantity(params.row.id, params.row.quantity)
                    }
                  }
                }, '+')
              ])
            }
          },
          {
            title: '小计',
            render: (h, params) => {
              return h('span', params.row.quantity * params.row.price)
            }
          },
          {
            title: '操作',
            key: 'action',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.removeItem(params.index, params.row.id)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        cartItems: [],
        sumPrice: 0,
        currentOrderNumber: ''
      }
    },
    created () {
      this.fetchData()
    },
    methods: {
      hanldeUpdateItemQuantity (itemId, quantity) {
        this.$http.put('/api/cart/item/update', {id: itemId, quantity: quantity}).then((response) => {
          if (response.data.code === 200) {
          }
        })
      },
      handleCheckout () {
        this.$http.post('/api/order/' + this.currentOrderNumber + '/checkout').then((response) => {
          if (response.data.code === 200) {
            this.$Message.success('结算成功')
          } else {
            this.$Message.error(response.data.msg)
          }
        })
      },
      calculateSumPrice () {
        let totalPrice = 0.00
        if (this.cartItems) {
          for (let i = 0; i < this.cartItems.length; i++) {
            let subPrice = this.cartItems[i].quantity * this.cartItems[i].price
            totalPrice += subPrice
          }
        }
        this.sumPrice = totalPrice
      },
      fetchData () {
        this.$http.get('/api/cart').then((response) => {
          if (response.data.code === 200) {
            this.cartItems = response.data.cart.orderItems
            this.calculateSumPrice()
            this.currentOrderNumber = response.data.cart.orderNumber
          }
        })
      },
      removeItem (index, itemId) {
        this.$Modal.confirm({
          title: '确认提示',
          content: '是否确定删除',
          onOk: () => {
            this.$http.delete('/api/cart/item?ids=' + itemId).then((response) => {
              if (response.data.code === 200) {
                this.$Message.success('删除成功')
                this.cartItems.splice(index, 1)
                this.calculateSumPrice()
              } else {
                this.$Message.error(response.data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
<style>
  #cartLayout {
    width:80%;
    margin:0 auto;
  }

  .cart {
    min-height: 100px;
  }
  .cart-toolbar {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #f0f0f0;
    height: 50px;
  }
  .ivu-affix .fixed-bottom {
    background: #fff none repeat scroll 0 0;
    border-width: 1px 0;
    bottom: 0;
    box-shadow: 0 -1px 8px rgba(0, 1, 1, 0.08);
    z-index: 999;
    width: 100%;
    position: fixed;
    left: 0;
  }

  .toolbar-wrap {
    margin: 0 auto;
    position: relative;
    width: 1077px;
  }
  .cart-toolbar .option-box {
    position: relative;
    height: 50px;
  }
  .toolbar-wrap .toolbar-right {
    position: absolute;
    right: 0;
    height: 52px;
    width: 610px;
    top: -1px;
  }

  .toolbar-wrap .toolbar-right .comm-right{
    float: right;
    width: 650px;
  }

  .toolbar-wrap .btn-area {
    float: right;
  }

  .toolbar-wrap .btn-area .submit-btn {
    background: #e54346 none repeat scroll 0 0;
    color: #fff;
    display: block;
    font-family: "Microsoft YaHei";
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 96px;
  }

  .toolbar-wrap .price-sum {
    color: #666;
    float: right;
    height: 43px;
    line-height: 20px;
    margin: 7px 20px 0 10px;
    position: relative;
    width: auto;
    font-size: 12px;
  }

  .toolbar-wrap .price-sum .txt {
    color: #999;
    float: left;
    text-align: right;
    width: 80px;
  }

  .toolbar-wrap .price-sum .price {
    display: inline-block;
    font-family: verdana;
    text-align: right;
  }

  .toolbar-wrap .price-sum .price em {
    color: #e4393c;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
  }


</style>
